<template>
  <div class="protfolio">
    <div class="header">
      <nav-header :is-bgc="true" name="protfolio"></nav-header>
    </div>
    <div class="banner-wrapper">
      <div class="banner">
        <img src="~@\assets\img\protfolio\protfolio-bg.png" alt="" />
      </div>
      <div class="shadow"></div>
      <div class="description">
        <h2>Protfolio</h2>
        <p>
          Sed ut perspiciatis unde omnis iste natus error sit voluptatem totam
          rem aperiam, eaque.
        </p>
      </div>
    </div>

    <div class="item-wrapper container">
      <div class="item-nav">
        <el-tabs class="demo-tabs" :stretch="isStretch">
          <el-tab-pane>
            <template #label> All </template>
            <div class="item-list">
              <template v-for="item in dataList" :key="item">
                <div class="item">
                  <div class="label">
                    <span>Financial</span>
                  </div>
                  <img
                    :src="`http://116.205.237.243:8080/investors/file/${item.id}`"
                  />
                  <div class="title">
                    <span>Roadshow time: {{ item.roadTime }}</span>
                  </div>
                  <div
                    class="item-detail"
                    @click="handleItemDetailBtn(item.id)"
                  >
                    <div class="detail-title">
                      <span>Roadshow time: 03/28/2022</span>
                    </div>
                    <p>
                      莎士比亚在不经意间这样说过，意志命运往往背道而驰，决心到最后会全部推倒。这不禁令我深思。
                      那么， 总结的来说，
                      所谓sadfsdaf，关键是sadfsdaf需要如何写。
                      俾斯麦曾经说过，对于不屈不挠的人来说，没有失败这回事。这句话语虽然很短，但令我浮想联翩。
                    </p>
                  </div>
                </div>
              </template>
              <i class="itemempty"></i>
              <i class="itemempty"></i>
              <i class="itemempty"></i>
            </div>
          </el-tab-pane>
          <el-tab-pane>
            <template #label> Financial </template>
            <div class="item-list">
              <template v-for="item in 12" :key="item">
                <div class="item">
                  <div class="label">
                    <span>Financial</span>
                  </div>
                  <img src="~@/assets/img/protfolio/protfolio-bg.png" alt="" />
                  <div class="title">
                    <span>Roadshow time: 03/28/2022</span>
                  </div>
                </div>
              </template>
            </div>
          </el-tab-pane>
          <el-tab-pane>
            <template #label> Mall </template>
            <div class="item-list">
              <template v-for="item in 12" :key="item">
                <div class="item">
                  <div class="label">
                    <span>Financial</span>
                  </div>
                  <img src="~@/assets/img/protfolio/protfolio-bg.png" alt="" />
                  <div class="title">
                    <span>Roadshow time: 03/28/2022</span>
                  </div>
                </div>
              </template>
            </div>
          </el-tab-pane>
          <el-tab-pane>
            <template #label> education </template>
            <div class="item-list">
              <template v-for="item in 12" :key="item">
                <div class="item">
                  <div class="label">
                    <span>Financial</span>
                  </div>
                  <img src="~@/assets/img/protfolio/protfolio-bg.png" alt="" />
                  <div class="title">
                    <span>Roadshow time: 03/28/2022</span>
                  </div>
                </div>
              </template>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
      <el-pagination
        layout="prev, pager, next"
        :total="dataCount"
        v-model:current-page="page.currentPage"
        :page-size="page.pageSize"
      />
    </div>
    <im-footer></im-footer>
  </div>
</template>

<script setup lang="ts">
import { ref, watch, computed } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from '@/store'

import { NavHeader } from '@/components/nav-header'
import ImFooter from '@/components/im-footer'

const router = useRouter()
const store = useStore()

const isStretch = ref(false)

// 响应式处理
const isStretchFunc = () => {
  if (document.documentElement.clientWidth < 1200) {
    isStretch.value = true
  } else {
    isStretch.value = false
  }
}
const getWindowSize = () => {
  window.addEventListener('resize', isStretchFunc)
}
getWindowSize()
isStretchFunc()

const page = ref({ currentPage: 1, pageSize: 12 })
watch(
  () => page,
  () => {
    getProjectList()
  },
  {
    deep: true,
  }
)

const getProjectList = (queryInfo: any = {}) => {
  store.dispatch('user/getProjectListAction', {
    queryInfo: {
      offset: page.value.currentPage, //currentPage * pageSize
      size: page.value.pageSize,
      ...queryInfo,
    },
  })
}
getProjectList()

// 从 vuex 中获取数据
const dataList = computed(() => store.state.user.projectList)

const dataCount = computed(() => store.state.user.projectCount)

const handleItemDetailBtn = (id: string) => {
  router.push(`/project-detail/${id}`)
}
</script>

<style scoped lang="less">
.protfolio {
  width: 100%;
  /*height: 100%;*/
  /*background-color: #fff;*/
  background: linear-gradient(210deg, #342e38 0%, #1c1c24 48%, #0c1017 100%);
  .banner-wrapper {
    width: 100%;
    position: relative;
    .banner {
      width: 100%;
      img {
        width: 100%;
        z-index: 0;
      }
    }

    .shadow {
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.7);
      left: 0;
      top: 0;
    }

    .description {
      position: absolute;
      left: 50%;
      top: 136px;
      transform: translateX(-50%);
      color: #fff;

      text-align: center;
      h2 {
        font-size: 55px;
        font-family: Source Han Serif SC;
        font-weight: 800;
      }
      p {
        font-size: 18px;
        font-family: SF Pro Text;
        font-weight: 400;
      }
    }
  }

  .container {
    padding: 0;
  }
  .item-wrapper {
    .item-nav {
      padding-top: 49px;
    }

    .item-list {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .item {
        position: relative;
        z-index: 0;
        width: 360px;
        height: 264px;
        /*margin-right: 17px;*/
        margin-bottom: 30px;
        border-radius: 5px 30px 5px 30px;
        .label {
          position: absolute;
          left: 0;
          top: 13px;
          padding: 0 12px;
          line-height: 40px;
          background: #3772ff;
          border-radius: 0px 27px 27px 0px;
          text-align: center;
          span {
            font-size: 20px;
            font-family: SF Pro Display;
            font-weight: 400;
            color: #fff;
          }
        }
        img {
          width: 100%;
          height: 100%;
          border-radius: 5px 30px 5px 30px;
        }
        .title {
          position: absolute;
          z-index: 1;
          width: 100%;
          height: 39px;
          line-height: 39px;
          left: 0;
          bottom: 0;
          border-radius: 0px 0px 5px 30px;
          text-align: center;
          background-color: rgba(0, 0, 0, 0.5);

          span {
            font-size: 20px;
            font-family: SF Pro Text;
            font-weight: 400;
            color: #fff;
          }
        }
        .item-detail {
          display: none;
          position: absolute;
          cursor: pointer;
          z-index: 2;
          left: 0;
          top: 0;
          width: 360px;
          height: 264px;
          background-color: #51b56d;
          border-radius: 5px 30px 5px 30px;
          padding: 20px;
          color: #fff;
          p {
            text-overflow: ellipsis;
            overflow: hidden;
            margin: 0;
          }
        }
      }

      .item:hover .item-detail {
        display: block;
      }

      .itemempty {
        display: block;
        width: 360px;
        // height: 264px;
      }
    }
  }
}
@media screen and(min-width: 980px ) and (max-width: 1200px) {
  .protfolio {
    .item-wrapper {
      .item-list {
        justify-content: space-around;
      }
    }
  }
}

@media screen and (max-width: 980px) {
  .protfolio {
    .item-wrapper {
      .item-list {
        justify-content: center;
      }
    }

    .banner-wrapper {
      .description {
        top: 50px;

        h2 {
          font-size: 26px;
        }
        p {
          font-size: 12px;
        }
      }
    }
  }
  :deep(.el-tabs__header) {
    padding: 0 30px;
  }
}

:deep(.el-tabs__nav-scroll) {
  transform: none !important;
}
:deep(.el-tabs__item.is-active) {
  background-color: rgba(112, 112, 112, 0.3);
  border-radius: 50px;
  color: #fff;
}
:deep(.el-tabs__nav-wrap::after) {
  height: 0px;
}

:deep(.el-tabs__active-bar) {
  height: 0;
}
:deep(.el-tabs__nav-prev) {
  display: none;
}
:deep(.el-tabs__nav-next) {
  display: none;
}
:deep(.el-tabs__nav-wrap.is-scrollable) {
  padding: 0;
}
:deep(.el-tabs__item) {
  padding: 0 20px !important;
  height: 44px;
  line-height: 49px;
  text-align: center;
  color: #fff;
}

:deep(.el-pagination) {
  justify-content: center;
  margin-bottom: 89px;
}
:deep(.el-pagination button) {
  color: #86888b;
  background-color: transparent;
}
:deep(.el-pager li) {
  background-color: transparent;
  color: #86888b;
}
:deep(.el-pager li.is-active) {
  background-color: #3772ff;
  color: #fff;
}

@media screen and (max-width: 750px) {
  .header {
    height: 61px;
  }
}
</style>
